<template>
    <div>
        <div class='editdetail'>
            <h3>添加用户</h3>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="name">
                    <el-input style="width:30%;" class='input' v-model="ruleForm.name" prop="name" v-on:blur="handleBlur()" placeholder="用户名为手机号"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password">
                    <el-input style="width:30%;" class='input' v-model="ruleForm.password" placeholder="用户密码不少于6位"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称" prop="nickName">
                    <el-input style="width:30%;" class='input' v-model="ruleForm.nickName"></el-input>
                </el-form-item>
                <el-form-item v-if="user.roleId==2" label="选择仓库" prop="storeNo">
                    <el-select style="width:30%;" @visible-change="getStoresList" v-model="storeNo" placeholder="请选择仓库">
                        <el-option v-for="item in storesList" :key="item.key" :label="item.label" :value="item.value">

                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else label="选择仓库" prop="storeNo">
                    <el-select disabled style="width:30%;" @visible-change="getStoresList" v-model="storeNo" placeholder="请选择仓库">
                        <el-option v-for="item in storesList" :key="item.key" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户角色">
                    <template>{{'普通用户'}}</template>
                </el-form-item>
                <el-form-item label="用户状态" prop="status">
                    <!-- <el-switch v-model="status"> {{ruleForm.status =status ==true ? 0 : 1}}</el-switch> -->
                    <el-checkbox v-model="status">{{status ? '有效': '无效'}}</el-checkbox>
                </el-form-item>
                <el-form-item class='right-btn'>
                    <el-button class='' type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button class='' type="primary" @click="goBack">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { addUser, checkUerName, getStores } from "../../data/postData";
export default {
    mounted() {
        this.getStoresList();
        console.log(this.$md5("123456"));
        //console.log(this.$md5(123456))
        if (this.user.roleId == 1) {
            this.storeNo = this.user.storeNo;
        } else {
            this.storeNo = "";
        }
    },
    data() {
        return {
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            ruleForm: {
                name: "",
                password: "",
                status: "",
                storeNo: "",
                nickName: ""
            },
            checkmobile: 0,
            disabled: false,
            storesList: [],
            storeNo: "",
            storeName: "",
            status: true,
            role: "",
            options: [
                {
                    value: "1",
                    label: "用户"
                },
                {
                    value: "2",
                    label: "管理员"
                }
            ],
            tableData: null,
            rules: {
                name: [
                    {
                        required: true,
                        message: "用户名为手机号",
                        trigger: "blur"
                    },
                    {
                        validator: function(rule, value, callback) {
                            if (/^1[34578]\d{9}$/.test(value) == false) {
                                callback(new Error("请输入正确的手机号"));
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                password: [
                    { required: true, message: "用户密码", trigger: "blur" }
                ],
                role: [
                    { required: true, message: "选择用户角色", trigger: "blur" }
                ],
                sex: [{ required: true, message: "选择性别", trigger: "blur" }],
                status: [
                    { required: true, message: "选择状态", trigger: "blur" }
                ],
                storeNo: [
                    { required: true, message: "选择仓库", trigger: "blur" }
                ],
                status: [
                    { required: true, message: "选择状态", trigger: "blur" }
                ],
                nickName: [
                    { required: true, message: "选择昵称", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        // 获取仓库列表
        getStoresList() {
            var params = {
                data: {}
            };
            var arr = [];
            this.$fetch.post(getStores, params).then(res => {
                res.data.forEach((val, i) => {
                    arr.push({
                        label: val.storeName,
                        value: val.storeNo,
                        key: val.storeId
                    });
                });
                this.storesList = arr;
                console.log(this.storesList);
            });
        },
        // 检测用户名是否可用
        handleBlur() {
            console.log(this.ruleForm.password);
            console.log(this.$md5(this.ruleForm.password));
            console.log(this.$md5(this.ruleForm.password.toString));
            var params = {
                data: {
                    name: this.ruleForm.name
                }
            };
            if (
                this.ruleForm.name != "" &&
                /^1[34578]\d{9}$/.test(this.ruleForm.name) == true
            ) {
                this.$fetch.post(checkUerName, params).then(res => {
                    if (res.data.status == true && res.data.code == "1") {
                        this.$message({
                            message: res.data.message,
                            type: "success",
                            duration: 1000
                        });
                        this.checkmobile = 1;
                    } else {
                        this.$message({
                            message: res.data.message,
                            type: "error",
                            duration: 1000
                        });
                    }
                });
            }
        },
        goBack() {
            this.$router.go(-1);
        },
        submitForm() {
            if (this.ruleForm.name) {
                if (
                    /^1[34578]\d{9}$/.test(this.ruleForm.name) == false ||
                    this.checkmobile == 0
                ) {
                    this.$message({
                        message: "用户手机号不正确或用户手机号已使用",
                        type: "error",
                        duration: 1000
                    });
                    // =='' || /^\d{6,}$/.test(this.ruleForm.password) == false
                } else if (this.ruleForm.password.length < 6) {
                    this.$message({
                        message: "密码不少于6位",
                        type: "error",
                        duration: 1000
                    });
                } else if (this.ruleForm.nickName == "") {
                    this.$message({
                        message: "用户昵称不能为空",
                        type: "error",
                        duration: 1000
                    });
                } else if (this.storeNo == "") {
                    this.$message({
                        message: "请选择仓库",
                        type: "error",
                        duration: 1000
                    });
                } else {
                    this.$confirm("确认添加？").then(_ => {
                        let params = {
                            data: {
                                name: this.ruleForm.name,
                                password: this.$md5(this.ruleForm.password),
                                nickName: this.ruleForm.nickName,
                                roleId: 1,
                                status: this.ruleForm.status,
                                storeNo: this.storeNo
                            }
                        };
                        this.$fetch
                            .post(addUser, params)
                            .then(res => {
                                this.$message({
                                    message: res.message,
                                    type: "success",
                                    duration: 1000
                                });
                                setTimeout(() => {
                                    this.$router.go(-1);
                                }, 1500);
                            })
                            .catch(err => {
                                this.$message({
                                    message: err.message,
                                    type: "error",
                                    duration: 1000
                                });
                            });
                    });
                }
            }
        }
    }
};
</script>
<style scoped lang='less'>
.editdetail {
    width: calc(~"100% - 250px");
    margin-top: 5%;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 20px;
    }
    .input {
        width: 33%;
    }
    .right-btn {
        position: absolute;
        right: 10%;
    }
}
</style>
